<script setup lang="ts">
import { ref } from 'vue'
import { changeUserInfoApi, getUserInfoApi } from '@/services/my'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const picture = ref<string>('')
const baseURL = 'https://szsensing.com:8581/'
const myinfoformData = ref({
  nickname: '',
})
const myinfoform = ref()
const updateAvatar = (e: any) => {
  console.log(e.detail.avatarUrl)
  picture.value = e.detail.avatarUrl
  //第一次自动请求是浏览器获取的腾讯服务器上的图片地址
  uni.uploadFile({
    url: `/slp/user/setPicture/${memberStore.profile?.id}`,
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: (res) => {
      console.log(res)
      picture.value = baseURL + JSON.parse(res.data).data
      console.log(picture.value)
    },
  })
}

const submit = async () => {
  const res = await changeUserInfoApi({
    userId: memberStore.profile!.id,
    picture: picture.value,
    nickname: myinfoformData.value.nickname,
  })
  if (res.msg === '对象正常') {
    uni.showToast({
      title: '修改成功',
      icon: 'none',
    })
    const { data } = await getUserInfoApi(memberStore.profile!.id)
    memberStore.changeUserInfo(data.nickname, data.picture)

    uni.navigateBack()
  }
}
onLoad(() => {
  picture.value = memberStore.profile?.picture!
  myinfoformData.value.nickname = memberStore.profile?.nickname!
})
const form = ref<any>()
const handlesure = (e) => {
  console.log(e.detail.value.nickname)
  myinfoformData.value.nickname = e.detail.value.nickname
  console.log('111', myinfoformData.value)
  myinfoform.value
    .validate('nickname')
    .then(() => {
      submit()
    })
    .catch((err: any) => {
      console.log(err)
    })
}

const myinfoformrules = ref({
  nickname: {
    rules: [
      { required: true, errorMessage: '请输入昵称' },
      { minLength: 1, maxLength: 8, errorMessage: '昵称长度在 8 个字符以内' },
    ],
  },
})
</script>
<template>
  <view class="content">
    <form @submit="handlesure">
      <uni-forms ref="myinfoform" :modelValue="myinfoformData" :rules="myinfoformrules" validateTrigger="bind">
        <view class="info-box">
          <uni-forms-item label="头像">
            <button
              plain
              open-type="chooseAvatar"
              @chooseavatar="updateAvatar"
              style="border-color: white; padding: 0 9.615rpx"
            >
              <view class="avatar">
                <image :src="picture" mode="scaleToFill" v-if="memberStore?.profile?.picture" />
                <image src="@/static/default-avatar.svg" mode="scaleToFill" v-else />
              </view>
            </button>
          </uni-forms-item>
          <uni-forms-item label="昵称" name="nickname">
            <!-- nickname键盘的值必循用form的name来获取 -->
            <input class="nickname" v-model="myinfoformData.nickname" type="nickname" name="nickname" />
          </uni-forms-item>
        </view>
      </uni-forms>
      <button class="submitButton" hover-class="button-hover" form-type="submit">确定</button>
    </form>
  </view>
</template>
<style lang="scss">
page {
  .content {
    position: relative;
    height: 100%;
    .info-box {
      margin: 48.077rpx;
      .uni-forms-item {
        padding: 9.615rpx 0;
        border-bottom: 0.577rpx solid #eaebec;
      }
      .uni-forms-item__content {
        button {
          width: 96.154rpx;
          margin-right: 0;
        }
        .icons--uniui-clear {
          display: none;
        }
      }
      .nickname {
        height: 100%;
        padding-right: 19.231rpx;
        text-align: right;
      }
      .avatar {
        margin: 0 auto;
        width: 76.923rpx;
        height: 76.923rpx;
        border-radius: 50%;
        background-color: #eee;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .name {
        text-align: right;
        margin-right: 19.231rpx;
      }
      .sex {
        width: 96.154rpx;
      }
      .age {
        display: flex;
        line-height: 46.154rpx;
      }
      .weight {
        display: flex;
        line-height: 46.154rpx;
      }
    }
  }
  .submitButton {
    margin: 38.462rpx auto;
    width: 634.615rpx;
    border-radius: 192.308rpx;
    border: 1px solid #28bb9c;
    background-color: #28bb9c;
    color: #ffff;
    font-size: 26.923rpx;
  }
  .button-hover {
    background-color: #2ecaa8;
    color: #d9d9d9;
  }
}
</style>
